<template>
  <div class="upload-item fade-in">
    <div class="mb-3 flex flex-wrap items-start justify-between gap-3">
      <div class="flex items-center gap-3">
        <div class="bg-primary/10 rounded-lg py-2 pr-1 pl-3">
          <svg class="icon text-3xl" aria-hidden="true">
            <use xlink:href="#icon-shipin"></use>
          </svg>
        </div>
        <div>
          <h4 class="font-medium">项目演示视频.mp4</h4>
          <p class="mt-0.5 text-xs text-gray-500">3.8GB · 正在上传</p>
        </div>
      </div>
      <div class="flex gap-2">
        <MBtn type="warning">暂停</MBtn>
        <MBtn type="danger">删除</MBtn>
      </div>
    </div>
    <!-- 进度条 -->
    <div class="mb-3 h-2.5 w-full overflow-hidden rounded-full bg-gray-100">
      <div class="bg-primary progress-shine h-2.5 rounded-full" style="width: 68%"></div>
    </div>
    <div class="flex flex-wrap justify-between gap-2 text-xs text-gray-500">
      <span>已上传: 2.6GB / 3.8GB</span>
      <span>速度: 4.2MB/s · 剩余: 4分钟</span>
    </div>
  </div>
  <!-- 上传项2：暂停中 -->
  <div class="upload-item fade-in" style="animation-delay: 0.1s">
    <div class="mb-3 flex flex-wrap items-start justify-between gap-3">
      <div class="flex items-center gap-3">
        <div class="rounded-lg bg-gray-100 p-2">
          <svg class="icon text-3xl" aria-hidden="true">
            <use xlink:href="#icon-yasuobaowenjian"></use>
          </svg>
        </div>
        <div>
          <h4 class="font-medium">资源包合集.zip</h4>
          <p class="mt-0.5 text-xs text-gray-500">5.2GB · 已暂停</p>
        </div>
      </div>
      <div class="flex gap-2">
        <MBtn type="success">继续</MBtn>
        <MBtn type="danger">删除</MBtn>
      </div>
    </div>
    <!-- 进度条 -->
    <div class="mb-3 h-2.5 w-full rounded-full bg-gray-100">
      <div class="bg-warning h-2.5 rounded-full" style="width: 32%"></div>
    </div>
    <div class="flex flex-wrap justify-between gap-2 text-xs text-gray-500">
      <span>已上传: 1.7GB / 5.2GB</span>
      <span>上次进度保留，可继续上传</span>
    </div>
  </div>

  <!-- 上传项3：等待中 -->
  <div class="upload-item fade-in" style="animation-delay: 0.2s">
    <div class="mb-3 flex flex-wrap items-start justify-between gap-3">
      <div class="flex items-center gap-3">
        <div class="rounded-lg bg-gray-100 p-2">
          <svg class="icon text-3xl" aria-hidden="true">
            <use xlink:href="#icon-PSD"></use>
          </svg>
        </div>
        <div>
          <h4 class="font-medium">设计素材图库.psd</h4>
          <p class="mt-0.5 text-xs text-gray-500">1.8GB · 等待上传</p>
        </div>
      </div>
      <div class="flex gap-2">
        <MBtn type="success">开始</MBtn>
        <MBtn type="danger">删除</MBtn>
      </div>
    </div>
    <!-- 进度条 -->
    <div class="mb-3 h-2.5 w-full rounded-full bg-gray-100">
      <div class="h-2.5 rounded-full bg-gray-300" style="width: 0%"></div>
    </div>
    <div class="flex flex-wrap justify-between gap-2 text-xs text-gray-500">
      <span>等待上传</span>
      <span>点击开始按钮启动上传</span>
    </div>
  </div>

  <!-- 上传完成的项目 -->
  <div class="upload-item fade-in" style="animation-delay: 0.3s">
    <div class="mb-3 flex flex-wrap items-start justify-between gap-3">
      <div class="flex items-center gap-3">
        <div class="rounded-lg bg-gray-100 p-2">
          <svg class="icon text-3xl" aria-hidden="true">
            <use xlink:href="#icon-pdfwenjian"></use>
          </svg>
        </div>
        <div>
          <h4 class="font-medium">产品需求文档.pdf</h4>
          <p class="mt-0.5 text-xs text-gray-500">24.5MB · 上传完成</p>
        </div>
      </div>
      <div class="flex gap-2">
        <MBtn type="info"><i class="iconfont icon-icon-"></i> 下载</MBtn>
        <MBtn type="danger">删除</MBtn>
      </div>
    </div>
    <!-- 进度条 -->
    <div class="mb-3 h-2.5 w-full rounded-full bg-gray-100">
      <div class="bg-secondary h-2.5 rounded-full" style="width: 100%"></div>
    </div>
    <div class="flex flex-wrap justify-between gap-2 text-xs text-gray-500">
      <span>上传完成于 14:25:36</span>
      <span class="text-secondary"><i class="fa fa-check-circle"></i> 已完成</span>
    </div>
  </div>
</template>
<script lang="ts" setup>
import MBtn from './MBtn.vue'
</script>
